<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="订单详情"
    :canFullscreen="false"
    :minHeight="0"
    :footer="null"
    @ok="handleSubmit"
  >
    <Description :column="1" :useCollapse="true" :data="descData" :schema="schema" />
    <CollapseContainer title="菜品列表">
      <a-list item-layout="horizontal" :data-source="orderCuisineList.value">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-row style="width: 100%">
              <a-col :span="14">
                <div>{{ item.cuisineName }}</div>
                <div v-if="item.specsName">规格：{{ item.specsName }}</div>
                <div v-if="item.practiceName">做法：{{ item.practiceName }}</div>
                <!--    <div>加料：</div>-->
                <div v-if="item.remark">>备注：{{ item.remark }}</div>
              </a-col>
              <a-col :span="5">{{ item.number }}</a-col>
              <a-col :span="5">￥{{ item.money }}</a-col>
            </a-row>
          </a-list-item>
        </template>
      </a-list>
    </CollapseContainer>

    <!--    <BasicForm @register="registerForm" />-->
  </BasicModal>
</template>
<script lang="ts">
  const schema: DescItem[] = [
    {
      field: 'id',
      label: '订单编号',
    },
    {
      field: 'totalNumber',
      label: '订单数量',
    },
    {
      field: 'totalMoney',
      label: '订单金额',
    },
    /*    {
    field: 'email',
    label: '状态',
  },*/
    {
      field: 'remark',
      label: '备注',
    },
    {
      field: 'createTime',
      label: '下单时间',
    },
  ];

  import { defineComponent, reactive, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { DescItem, Description } from '/@/components/Description/index';
  import { CollapseContainer } from '/@/components/Container';
  import { getListAll } from '/@/api/order/orderMealCuisine';

  export default defineComponent({
    name: 'AccountModal',
    components: { BasicModal, Description, CollapseContainer },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const descData = ref<any>({});

      const orderCuisineList = reactive<any>({ value: [] });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: false });
        descData.value = data.record;
        orderCuisineList.value = await getListAll({ orderMealId: descData.value.id });
      });

      async function handleSubmit() {
        try {
          setModalProps({ confirmLoading: true });
          closeModal();
          emit('success');
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      /* const [register] = useDescription({
      column: 1,
      useCollapse: true,
      data: this_data.record,
      schema: schema,
    });*/

      return { registerModal, handleSubmit, schema, descData, orderCuisineList };
    },
  });
</script>
